<template>
	<div class="lum-dialog-mask">
		<el-container class="lum-dialog-box" :class="{ 'full-screen': fullscreen }">
			<el-header height="60px" class="header">
				<p>权限分配</p>
				<p class="title">
					<span>个人权限分配</span>
				</p>
				<p class="tools">
					<i
						class="iconfont"
						style="transform: scale(0.85)"
						:class="fullscreen ? 'icon-tuichuquanping' : 'icon-quanping'"
						@click="fullscreen = !fullscreen"
					/>
					<i class="el-icon-close" @click="$emit('close')" />
				</p>
			</el-header>

			<el-container class="full-height ov-hidden" style="padding: 15px">
				<div style="overflow:auto;margin-left: 12px;">
					<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">
					</el-tree>
				</div>
			</el-container>
			<el-footer height="60px" class="footer">
				<div style="width: 178px;">
					<el-button size="medium" @click="closeEvent()">取消</el-button>
					<el-button size="medium" type="primary" @click="submitTap()">确认提交</el-button>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
    export default {
        name: 'fullscreen',
        props: {},

        data() {
            return {
                fullscreen: false,
                data: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1',
                        }, {
                            id: 10,
                            label: '三级 1-1-2',
                        }, ],
                    }, ],
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1',
                    }, {
                        id: 6,
                        label: '二级 2-2',
                    }, ],
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1',
                    }, {
                        id: 8,
                        label: '二级 3-2',
                    }, ],
                }, ],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
            };
        },
        mounted() {},
        created() {},
        methods: {
            handleChange(value, direction, movedKeys) {
                
            },
        },
    };
</script>
<style lang="less" scoped>
    /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
    }
    
    .lum-dialog-mask {
        z-index: 99;
    }
    
    .lum-dialog-box {
        width: 100%;
        height: 600px;
        max-width: 500px;
        transition: 1s ease;
        &.full-screen {
            width: 100%;
            height: 100%;
            max-width: unset;
            margin: 0;
            border-radius: 0px;
        }
    }
</style>